<template>
  <div>
    <section class="aui-content" id="user-info">
      <div
        class="aui-list aui-media-list aui-list-noborder aui-bg-info"
        style="padding: 14px 0"
      >
        <div
          class="aui-list-item aui-list-item-middle"
          style="background-image: none"
        >
          <div class="aui-media-list-item-inner">
            <div class="aui-list-item-media" style="width: 3rem">
              <img
                src="../static/picture/user_defalut_avatar2.png"
                class="aui-img-round"
              />
            </div>
            <div
              @click="toSetting"
              class="aui-list-item-inner aui-list-item-arrow"
              v-if="isLoggedIn"
            >
              <div
                class="aui-list-item-text text-white aui-font-size-18"
                style="color: #fff"
              >
                {{ currentUser.username }}
              </div>
              <div class="aui-list-item-text text-white">
                <div style="color: #fff">
                  <i
                    class="aui-iconfont aui-icon-mobile aui-font-size-14"
                    style="color: #fff"
                  ></i>
                  {{ currentUser.email }}
                </div>
              </div>
            </div>
            <router-link :to="{ path: '/login' }" v-else>
              <div class="aui-list-item-inner">
                <div
                  class="aui-list-item-text text-white aui-font-size-18"
                  style="color: #fff"
                >
                  登录/注册
                </div>
              </div></router-link
            >
          </div>
        </div>
        <div class="aui-row aui-clear-cl" v-if="isLoggedIn">
          <div class="aui-col-xs-4 aui-border-r">
            <router-link :to="{ path: '/trends' }">
              <div class="aui-clear-cl1">3435</div>
              <div class="aui-gird-lable aui-font-size-12">动态</div>
            </router-link>
          </div>
          <div class="aui-col-xs-4 aui-border-r">
            <router-link :to="{ path: '/foucs' }">
              <div class="aui-clear-cl1">433545</div>
              <div class="aui-gird-lable aui-font-size-12">关注</div>
            </router-link>
          </div>
          <div class="aui-col-xs-4">
            <router-link :to="{ path: '/collect' }">
              <div class="aui-clear-cl1">67809</div>
              <div class="aui-gird-lable aui-font-size-12">粉丝</div>
            </router-link>
          </div>
        </div>
      </div>
    </section>
    <section class="aui-content aui-content-size" v-if="isLoggedIn">
      <div class="aui-grid">
        <div class="aui-row">
          <div class="aui-col-xs-6">
            <router-link :to="{ path: '/fans' }">
              <i class="aui-iconfont aui-icon-like aui-text-warning"></i>
              <div class="aui-grid-label">收藏</div>
            </router-link>
          </div>
          <div class="aui-col-xs-6">
            <router-link :to="{ path: '/follow' }">
              <i class="aui-iconfont aui-icon-pencil aui-text-warning"></i>
              <div class="aui-grid-label">跟帖</div>
            </router-link>
          </div>
        </div>
      </div>
    </section>
    <ul class="aui-list aui-list-in"  v-if="isLoggedIn" style="background-image: none">
      <div class="aui-he"></div>
      <li class="aui-list-item" style="background-image: none">
        <router-link :to="{ path: '/message' }">
          <div class="aui-list-item-label-icon">
            <i class="aui-iconfont aui-icon-location aui-text-info"></i>
          </div>
          <div class="aui-list-item-inner aui-list-item-arrow">
            <div class="aui-list-item-title aui-black">我的消息</div>
          </div>
        </router-link>
      </li>
      <div class="aui-he" v-if="isLoggedIn"></div>
      <li
        class="aui-list-item"
        style="background-image: none"
        v-if="isLoggedIn"
      >
        <router-link :to="{ path: '/feedback' }">
          <div class="aui-list-item-label-icon">
            <i class="aui-iconfont aui-icon-cert aui-text-warning"></i>
          </div>
          <div class="aui-list-item-inner aui-list-item-arrow">
            <div class="aui-list-item-title aui-black">意见反馈</div>
          </div>
        </router-link>
      </li>
      <div class="aui-he"></div>
      <div class="aui-padded-15 aui-list-item-inner aui-list-item-center">
        <div
       
          @click="logout"
          class="aui-btn aui-btn-block aui-btn-sm aui-btn-danger"
        >
          退出登录
        </div>
      </div>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getterTypes, actionTypes } from "@/store/modules/auth";
export default {
  computed: {
    ...mapGetters({
      isLoggedIn: getterTypes.isLoggedIn,
      currentUser: getterTypes.currentUser,
    }),
  },
  mounted() {
    console.log(this.isLoggedIn);
  },
  methods: {
    toSetting() {
      this.$router.push("/setting");
    },
    logout() {
      this.$store.dispatch(actionTypes.logout).then(() => {
        // console.log("logout res", res);
        this.$router.replace('/login')
      });
    },
  },
};
</script>

<style>
</style>